<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>认识 fragment</h1>
    <ul class="list">

    </ul>
    <!-- 
        根标签 -- fragment -- window.document.createDocumentFragment()
        为什么 vue2中template模板中需要根标签，在vue3中则不需要根标签？
            因为在vue3内部插入了Fragment(片段)  -- 碎片节点  
            Fragment 是一个虚拟元素。 解析的时候存在，解析完展示的时候就不存在了。
        使用Fragment虚拟元素的好处： 减少了标签的层级，减小内存占用。
        Fragment 是一个什么东西？
            Fragment使用的是windown当中的document当中的createDocumentFragment

        createDocumentFragment()方法 是什么？原理？
        createdocumentfragment()方法创建了一虚拟的节点对象，节点对象包含所有属性和方法。
        1.createDocumentFragment()方法，是用来创建一个虚拟的节点对象，或者说，是用来创建文档碎片节点。它可以包含各种类型的节点，在创建之初是空的。
        2.DocumentFragment节点不属于文档树，继承的parentNode属性总是null。它有一个很实用的特点，当请求把一个DocumentFragment节点插入文档树时，插入的不是DocumentFragment自身，而是它的所有子孙节点，即插入的是括号里的节点。这个特性使得DocumentFragment成了占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作。 
        另外，当需要添加多个dom元素时，如果先将这些元素添加到DocumentFragment中，再统一将DocumentFragment添加到页面，会减少页面渲染dom的次数，效率会明显提升。

        体现出以下几点：
            1.虚拟的节点对象，可包含各类型的节点，节点的各种属性和方法
            2.使用fragment进行节点的插入时，不是自身而是它的子元素
            3.将子元素统一都插入到页面，减少DOM操作，减少重排 重绘 回流，效率会明显提升
        

        使用场景：
        createdocumentfragment()方法创建了一虚拟的节点对象，节点对象包含所有属性和方法。
        当你想提取文档的一部分，改变，增加，或删除某些内容及插入到文档末尾可以使用createDocumentFragment() 方法。
        你也可以使用文档的文档对象来执行这些变化，但要防止文件结构被破坏，createDocumentFragment() 方法可以更安全改变文档的结构及节点。

        他能帮我们完成节点创建的一系列动作，但是他又不会增加代码解析时候的层级。
    -->

    <script>
        console.log(window)
        console.log(window.document)
        console.log(window.document.createDocumentFragment) //  函数-- 用来创建一个虚拟片段

        // 需求：  要在页面创建 5w个li，li里面的内容是他是第多少个

        //第一种：普通方式 
        //          创建一个根节点，然后通过for循环，不断的往根节点中添加li节点
        //          这个效果，反复的操纵dom，不断地进行重排重绘回流，浪费性能，效率低，页面卡死。
        //获取父元素
        // var parent = document.querySelector('.list')
        // //通过for循环添加 li
        // for(var i=0;i<200000;i++){
        //     //创建li元素节点
        //     var li = document.createElement('li');
        //     //创建文本节点
        //     var text = document.createTextNode(`这是第${+i}个！`)
        //     //将文本节点加到元素节点中
        //     li.appendChild(text)
        //     //将li加到ul中
        //     parent.appendChild(li)
        // }
        //第二种：fragment
        //         fragment 把所有的li都加到了虚拟元素的内部，形成了<fragment><li>200000个</li></fragment>，然后 再将虚拟元素加入到ul当中，操作dom就操作了一次。
        var parent = document.querySelector('.list')
        var frag = document.createDocumentFragment()
        for (var i = 0; i < 200000; i++) {
            var li = document.createElement('li')
            var text = document.createTextNode(`这是第${+i}个！`)
            li.appendChild(text)
            frag.appendChild(li)
        }
        parent.appendChild(frag)
    </script>
</body>

</html>